<template>
	<footer>
		<div class="list"></div>
		<div class="title">
			<div class="name"><div v-if="!xiangxi.title">请选择播放内容</div><div  v-if="xiangxi.title">{{xiangxi.title}}</div></div>
			<div class="detailed"><div v-if="!xiangxi.title"></div><div v-if="xiangxi.title">{{xiangxi.detail.title}}</div></div>
		</div>
		<div class="start" @click="bofang" v-bind:class="audios?'zanting':'start'"></div>
		<div class="history" @click="change"></div>
		<div class="audios"><audio v-play :state="audios"  :src="urls"></audio></div>
	</footer>
</template>

<script>
	export default {
		data(){
			return{
				xiangxi:[],
				urls:[],
				audios:false
			}
		},
		methods: {
			change(){
				this.$store.commit('changeHistory');
			},
			bofang(){
				this.audios = !this.audios;
			}
		},
		computed:{
			sid(){
				return this.$store.state.detail;
			}
		},
		mounted(){
			this.$watch('sid',function(a){
				if(a){
			this.xiangxi=a;
			this.urls="http://od.qingting.fm/"+a.detail.mediainfo.bitrates_url[0].file_path;
				}
			})
		},
		directives: {
			play:function(e,a,c){
				console.log(c)
				if(c.data.attrs.state){
					e.play();
				}else{
					e.pause();
				}
			}
		}
	}
</script>

<style scoped> 
	footer{
		width: 100%;
		position: absolute;
		height: 1.260869rem;
		line-height: 1.2rem;
		bottom: 0;
		display: flex;
		background-color: #f3f3f3;
		z-index: 100000;
	}
	.list{
		width: 20%;
		height: 100%;
		background: url(../../img/footer_list.png) center center no-repeat;
		background-size: 40%;
	}
	.title{
		width: 60%;
		height: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.name{
		width: 100%;
		height: 0.782608rem;
		line-height: 0.782608rem;
		font-size: 0.326086rem;
		color: #262628;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.detailed{
		width: 100%;
		line-height: 0.260869rem;
		font-size: 0.260869rem;
		color: #9f9f9f;

	}
	.start{
		width: 20%;
		height: 100%;
		background: url(../../img/footer_start.png) center center no-repeat;
		background-size: 40%;
	}
	.zanting{
		width: 20%;
		height: 100%;
		background: url(../../img/zanting.png) center center no-repeat;
		background-size: 40%;
	}
	.history{
		width: 20%;
		height: 100%;
		background: url(../../img/footer_history.png) center center no-repeat;
		background-size: 40%;
	}
</style>